.btn-arrow-right,
.btn-arrow-left {
  position: relative;

  --btn-full-height: calc(var(--bs-btn-padding-y) * 2 + (var(--bs-btn-font-size) * var(--bs-btn-line-height)));
  --btn-full-half-divisor: 2;
  --btn-full-half-height: calc(var(--btn-full-height) / var(--btn-full-half-divisor));
  --btn-edge-divisor: 1.4142135624;
  --btn-edge-size: calc(var(--btn-full-height) / var(--btn-edge-divisor));

  --btn-btn-arrow-padding-x: calc(max(var(--bs-btn-padding-x), var(--btn-full-half-height)));
  --btn-content-shift: calc(var(--btn-btn-arrow-padding-x) + var(--btn-full-half-height));

    --bs-actual-border-width: 0px;
}

/* cutting the arrow inside, adding 10px to show shadows */
.btn-arrows-around > .btn-arrow-right,
.btn-arrow-right:not(.btn-group > :first-of-type) {
  clip-path: polygon(
          0 0, 0 -10px,
          9999px -10px,
          9999px calc(100% + 10px),
          0 calc(100% + 10px), 0 100%,
          var(--btn-full-half-height) 50%
  );

  padding-left: var(--btn-content-shift);

  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.btn-arrows-around > .btn-arrow-left,
.btn-arrow-left:not(.btn-group > :last-of-type) {
  clip-path: polygon(
          100% 0, 100% -10px,
          -9999px -10px,
          -9999px calc(100% + 10px),
          100% calc(100% + 10px), 100% 100%,
          calc(100% - var(--btn-full-half-height)) 50%
  );

  padding-right: var(--btn-content-shift);

  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.btn.btn-arrow-right,
.btn-group:not(.btn-arrows-around) > .btn.btn-arrow-left:last-of-type {
    padding-right: var(--btn-btn-arrow-padding-x);
}
.btn-arrows-around > .btn.btn-arrow-right,
.btn.btn-arrow-right:not(.btn-group > :last-of-type) {
    /*padding-right: var(--btn-btn-arrow-padding-x);*/
  border-right-color: transparent !important;

  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.btn.btn-arrow-left,
.btn-group:not(.btn-arrows-around) > .btn.btn-arrow-right:first-of-type {
  padding-left: var(--btn-btn-arrow-padding-x);
}
.btn-arrows-around > .btn.btn-arrow-left,
.btn.btn-arrow-left:not(.btn-group > :first-of-type) {
  /*padding-left: var(--btn-btn-arrow-padding-x);*/
  border-left-color: transparent !important;

  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

:not(.btn-group) > .btn.btn-arrow-right,
.btn-arrows-around > .btn.btn-arrow-right:last-of-type {
  margin-right: calc(var(--btn-full-half-height) + 0.5px);
}

:not(.btn-group) > .btn.btn-arrow-left,
.btn-arrows-around > .btn.btn-arrow-left:first-of-type {
  margin-left: calc(var(--btn-full-half-height) + 0.5px);
}

/* we need this to avoid overflows, because of the "invisible" square */
.btn-arrows-around,
:not(.btn-group) > .btn.btn-arrow-left,
:not(.btn-group) > .btn.btn-arrow-right {
    overflow: hidden;
}

.btn-arrows-around > .btn-arrow-right::after,
.btn-arrow-right:not(.btn-group > :last-of-type)::after,
.btn-arrows-around > .btn-arrow-left::before,
.btn-arrow-left:not(.btn-group > :first-of-type)::before,
.btn-arrows-around > .btn-arrow-right::before,
.btn-arrow-right:not(.btn-group > :first-of-type)::before,
.btn-arrows-around > .btn-arrow-left::after,
.btn-arrow-left:not(.btn-group > :last-of-type)::after {
  content: "";
  position: absolute;
  width: var(--btn-edge-size);
  height: var(--btn-edge-size);

  top: 50%;
  box-sizing: content-box;

  background: inherit;
  border: inherit;

  border-radius: 0 !important;
}

.btn-arrow-right::before {
  left: 0;
}
.btn-arrow-right::after {
  left: 100%;
}
.btn-arrow-left::before {
    right: 100%;
}
.btn-arrow-left::after {
  right: 0;
}

/* hack for arrow buttons */
.btn.btn-arrow-left[class*="-outline-"],
.btn.btn-arrow-right[class*="-outline-"] {
    --bs-actual-border-width: var(--bs-border-width);
}

.btn-arrow-right::before,
.btn-arrow-right::after {
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);

    /* it's tricky here we want content-box translation for X direction, to stick diagonal to the side (it works only this way), but border-box for the vertical translation, to align properly*/
    /* but it's not possible in css, so we'll do it that way */
    transform: /* centering */
            translateX(-50%)
            translateY(calc(calc(0px - var(--bs-actual-border-width)) - 50%)) /* it's not very clear solution because for example not outlined buttons will not have border and there will be incorrect shift  */
            rotate(-135deg);
    transform-box: content-box;
}
.btn-arrow-left::before,
.btn-arrow-left::after {
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);

    /* it's tricky here we want content-box translation for X direction, to stick diagonal to the side (it works only this way), but border-box for the vertical translation, to align properly*/
    /* but it's not possible in css, so we'll do it that way */
    transform: /* centering */
            translateX(50%)
            translateY(calc(calc(0px - var(--bs-actual-border-width)) - 50%))  /* it's not very clear solution because for example not outlined buttons will not have border and there will be incorrect shift  */
            rotate(135deg);
    transform-box: content-box;
}
